(function init(){
    var page = getpage(articles);
    page.showPageNum();
    page.loadList();
    page.loadNextPage();
    page.loadPrevPage();
    unfoldResult();
    foldResult();
    searchArticle();
})();

function unfoldResult(){
    var header_text = document.getElementById("header-text");
    var result_pannel = document.getElementsByClassName("main-result")[0];
    header_text.addEventListener("focus", function(){
        result_pannel.style.display= "block";
    });
}
function foldResult() {
    var header_text = document.getElementById("header-text");
    var result_fold = document.getElementsByClassName("result-fold")[0];
    var result_pannel = document.getElementsByClassName("main-result")[0];
    result_fold.addEventListener("click", function(){
        result_pannel.style.display= "none";
        header_text.value = '';

    });
}
function searchArticle() {
    var header_search = document.getElementsByClassName("header-search")[0];
    header_search.addEventListener("submit", function(e){
        e.preventDefault();
        var text = e.target[1].value;
        if(text == ''){
            return;
        }
        var res = getMatchRes(articles, text);
        var result_list = document.getElementsByClassName("result-list")[0];
        var html = '';
        for(var i=0; i<res.length; i++){
            var temp_name = res[i].name.replace(text, `<span style="color: var(--color-main)">${text}</span>`);
            var temp_url = res[i].url;
            var tempstr = `<li><a href="./${temp_url}">${temp_name}</a></li>`
            html += tempstr;
        }
        result_list.innerHTML = html; 
    })
}
function getpage(articles){
    return page = {
        articles: articles,
        artilces_num: articles.length,
        page_gap: 16,
        page_now: 1,
        page_all: parseInt(articles.length/16)+1,
        showPageNum: function(){
            var pagenowtext = document.getElementsByClassName("page-now");
            var pagealltext = document.getElementsByClassName("page-all");
            pagenowtext[0].innerText = this.page_now;
            pagealltext[0].innerText = this.page_all;
        },
        loadList: function(){
            var list = document.getElementsByClassName("articles-list");
            var html = '';
            var len = this.artilces_num<this.page_gap?this.artilces_num:this.page_gap;
            for(var i=0; i<len; i++){
                var tempstr = `<li><a href="./${this.articles[i].url}">${this.articles[i].name}</a><span>${this.articles[i].time}</span></li>`;
                html += tempstr;
            }
            list[0].innerHTML = html;
        },
        loadNextPage: function(){
            var control_right = document.getElementsByClassName("control-right");
            var that = this;
            control_right[0].addEventListener("click", function(){
                if(that.page_now == that.page_all){
                    return;
                }
                var list = document.getElementsByClassName("articles-list");
                var html = '';
                var start = that.page_now * that.page_gap;
                var end = (start+that.page_gap)>=that.artilces_num?that.artilces_num:(start+that.page_gap);
                for(var i=start; i<end; i++){
                    var tempstr = `<li><a href="./${that.articles[i].url}">${that.articles[i].name}</a><span>${that.articles[i].time}</span></li>`;
                    html += tempstr;
                }
                list[0].innerHTML = html;
                that.page_now += 1;
                var pagenowtext = document.getElementsByClassName("page-now");
                pagenowtext[0].innerText = that.page_now;
            })
        },
        loadPrevPage: function(){
            var control_left = document.getElementsByClassName("control-left");
            var that = this;
            control_left[0].addEventListener("click", function(){
                if(that.page_now == 1){
                    return;
                }
                var list = document.getElementsByClassName("articles-list");
                var html = '';
                var start = (that.page_now-2) * that.page_gap;
                var end = start + that.page_gap;
                for(var i=start; i<end; i++){
                    var tempstr = `<li><a href="./${that.articles[i].url}">${that.articles[i].name}</a><span>${that.articles[i].time}</span></li>`;
                    html += tempstr;
                }
                list[0].innerHTML = html;                
                that.page_now -= 1;
                var pagenowtext = document.getElementsByClassName("page-now");
                pagenowtext[0].innerText = that.page_now;
            })
        }
    }
}

